<template>
	<view class="container">
		<uni-card :border="false" margin="24rpx" shadow="none">
			<template v-slot:title>
				<uni-section title="第一步" type="line"></uni-section>
			</template>
			
			<view class="content flex">
				<view class="txt">请联系客服获取“谷歌验证器”的安装包，或打开谷歌浏览器搜索自行下载.</view>
				<!-- <up-link :href="download" text="下载地址" target="_blank"></up-link> -->
			</view>
		</uni-card>
		<uni-card :border="false" margin="24rpx" shadow="none">
			<template v-slot:title>
				<uni-section title="第二步" type="line"></uni-section>
			</template>
			
			<view class="content flex">
				<view class="txt">安装好后，使用“谷歌验证器”APP，扫描下方二维码绑定</view>
				<geek-qrcode cid="qrcode2" ref="qrcode" :val="googleQrcode" :size="size" :onval="onval"
					:loadMake="loadMake" :usingComponents="true" @result="qrR" />
			</view>
		</uni-card>
		<uni-card :border="false" margin="24rpx" shadow="none">
			<template v-slot:title>
				<uni-section title="第三步" type="line"></uni-section>
			</template>
			
			<view class="content flex">
				<view class="txt">输入谷歌验证码，并点击"提交绑定"</view>
				<up-code-input v-model="validCode" :maxlength="6"></up-code-input>
			</view>
		</uni-card>

		<view class="uni-padding-wrap">
			<button type="primary" @tap="bindGoogleQrcode" v-if="loginType=='1'">提交绑定</button>
			<button type="warn" @tap="unbindGoogleQrcode" v-if="loginType=='3'">您已绑定谷歌验证，解除绑定</button>
		</view>
	</view>
</template>
<script>
import { googleQrcode,googleBind } from '@/api/seller/security'

export default {
	data() {
		return {
			ifShow: true,
			validCode: '',
			loginType: '',
			googleQrcode: 'null', // 要生成的二维码值
			download: '',
			size: 240, // 二维码大小
			unit: 'upx', // 单位
			background: '#b4e9e2', // 背景色
			foreground: '#309286', // 前景色
			pdground: '#32dbc6', // 角标色
			icon: '', // 二维码图标
			iconsize: 40, // 二维码图标大小
			lv: 3, // 二维码容错级别 ， 一般不用设置，默认就行
			onval: true, // val值变化时自动重新生成二维码
			loadMake: false, // 组件加载完成后自动生成二维码
			src: '' // 二维码生成后的图片地址或base64
		}
	},
	onLoad() {
		this.getGoogleCode();
	},
	methods: {
		bindGoogleQrcode() {
			if(this.validCode==='') {
				this.$modal.msgError('请输入谷歌验证码')
				return;
			}
			var data = {"googleAuthCode":this.validCode,"loginType":"3"};
			googleBind(data).then(res => {
				this.loginType = "3";
				uni.showModal({
				  title: '系统提示',
				  content: '绑定谷歌验证码成功！',
				  cancelText: '退出',
				  showCancel:false,
				  confirmText: '知道了',
				  success: function (res) {
				    if (res.confirm) {
						self.$tab.navigateBack()
				    }
				  }
				})
			})
		},
		getGoogleCode() {
			googleQrcode().then(res => {
				this.googleQrcode = res.data.qrcode;
				this.loginType = res.data.loginType;
				this.download = res.data.download;
				this.$refs.qrcode._makeCode();
			})		
		},
		unbindGoogleQrcode() {
			this.$modal.msgSuccess('暂不支持')
		}
	}
}
</script>

<style lang="scss" scoped>
/* @import "../../../common/icon.css"; */
.container {
	display: flex;
	flex-direction: column;
	width: 100%;
	
	&::v-deep{
		.uni-card{
			margin-bottom: 0 !important;
			padding-bottom: 10rpx !important;
			
			.uni-section{
				border-bottom: 1px solid #efefef;
				.uni-section__content-title{
					font-size:30rpx !important;
					color:#000 !important;
					font-weight:bold;
				}
			}
			
			.uni-card__content{
				.content{
					flex-direction: column;
					.txt{
						font-size:28rpx !important;
						color:#666 !important;
						margin-bottom: 20rpx;
					}
					
					.geek-qrcode,.u-code-input{
						margin:20rpx auto;
					}
				}
			}
		}
	}
	
	.uni-padding-wrap{
		padding: 80rpx 60rpx;
		button{
			border-radius:80rpx;
			height: 80rpx;
			line-height:80rpx;
			font-size:30rpx;
			letter-spacing:4rpx;
			&::after{
				border:none !important;
			}
		}
	}
}

.qrimg {
	display: flex;
	justify-content: center;
}

.qrimg-i {
	margin-right: 10px;
}

input {
	width: 100%;
	margin-bottom: 20upx;
}

.btns {
	display: flex;
	flex-direction: column;
	width: 100%;
}

button {
	width: 100%;
	margin-top: 10upx;
}

</style>